<template>
  <div>
    <el-row>
      <div v-for="(item,index) in products">
        <el-col :span="6">
          <div class="product mr5 ml5 mt5 mb8" :style="'flex: 1;border: 1px solid #dfdfdf;'">
            <div style="background-color: #FFFFFF;text-align: center;" @click="goodsClick(item)">
              <div style="margin: 0 20px;">
                <div>
                  <el-image
                    style="width: 150px; height: 150px"
                    :src="getUrl(item.medImage)"
                    fit="fit"></el-image>
                </div>
                <div style="font-size: 16px;font-weight: 500;height: 30px;overflow: hidden;text-overflow: ellipsis;">
                  {{ item.medName }}
                </div>
                <div style="font-size: 12px;height: 50px;overflow: hidden;text-overflow: ellipsis;">
                  {{ item.medInfo }}
                </div>
              </div>
            </div>
            <div style="height: 40px;line-height: 40px;display: flex;font-size: 12px;">
              <div style="flex:1;color: red;margin-left: 20px;border-right: 1px solid #d6d9e2;font-weight: 600;">
                ¥{{ item.untitled }} 元
              </div>
              <div style="flex:1;display: flex;">
                <div style="flex: 1;"></div>
                <div style="display: flex;width: 100px;">
                  <img src="@/assets/img/car.png" style="width: 20px;height: 20px;margin-top: 10px;margin-right: 5px;">
                  <el-button type="text" style="color: gray;">加入购物车</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </el-row>
    <food-info ref="goodsInfo"/>
  </div>
</template>

<script>
import {headUrl} from "../../../utils/common";
import FoodInfo from "../foodInfo/foodInfo";
import {isLogin} from "../../../utils/request";

export default {
  name: "goodList",
  components: {FoodInfo},
  props: {
    products: Array,
  },
  methods: {
    getUrl(url) {
      return headUrl + url
    },
    goodsClick(item) {

      this.$refs.goodsInfo.open(item,isLogin);
    },

  }
}
</script>

<style scoped>

</style>
